<template>
  <div>
    <el-card>
      <el-alert
        title="添加商品信息"
        type="info"
        center
        show-icon
        :closable="false"
      ></el-alert>
      <el-steps
        :space="200"
        :active="active_index - 0"
        finish-status="success"
        align-center
      >
        <el-step title="基本信息"></el-step>
        <el-step title="是否多规格"></el-step>
        <el-step title="商品属性"></el-step>
        <el-step title="详细参数"></el-step>
        <el-step title="商品内容"></el-step>
        <el-step title="完成"></el-step>
      </el-steps>
      <el-form
        label-position="top"
        :model="add_form"
        :rules="add_rules"
        ref="add_ref"
      >
        <el-tabs
          :tab-position="'left'"
          v-model="active_index"
          :before-leave="beforeLeave"
        >
          <el-tab-pane label="基本信息" name="0">
            <el-form-item label="商品分类" prop="product_type_id">
              <el-cascader
                placeholder="请选择商品分类"
                v-model="value"
                :options="product_type_list"
                :props="{ expandTrigger: 'hover', value: 'id', label: 'title' }"
                @change="add_handle_change"
                clearable
              >
              </el-cascader>
            </el-form-item>
            <el-form-item label="商品名称" prop="name">
              <el-input
                placeholder="请输入商品名称"
                maxlength="30"
                clearable
                show-word-limit
                v-model="add_form.name"
              ></el-input>
            </el-form-item>
            <el-form-item label="商品描述" prop="describe">
              <el-input
                placeholder="请输入商品描述"
                maxlength="100"
                clearable
                show-word-limit
                type="textarea"
                :rows="3"
                v-model="add_form.describe"
              ></el-input>
            </el-form-item>
            <el-form-item label="图片" prop="image_id">
              <s-file-image @confirm_imsge="add_confirm_image"></s-file-image>
            </el-form-item>
            <el-form-item label="轮播图">
              <s-file-image
                :count="9"
                @confirm_imsge="add_confirm_image_all"
              ></s-file-image>
            </el-form-item>
            <el-form-item label="排序" prop="sort">
              <el-input
                type="number"
                placeholder="请输入排序"
                maxlength="10"
                clearable
                show-word-limit
                v-model="add_form.sort"
              ></el-input>
            </el-form-item>
          </el-tab-pane>
          <el-tab-pane label="是否多规格" name="1">
            <el-form-item label="是否多规格" prop="specs_status">
              <el-radio-group v-model="add_form.specs_status" size="medium">
                <el-radio border :label="0">否</el-radio>
                <el-radio border :label="1">是</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-tab-pane>
          <el-tab-pane label="商品属性" name="2">
            <div
              v-if="add_form.specs_status === 1 && attrbute_key_list.length > 0"
            >
              <el-form-item
                v-for="(item, index) in attrbute_key_list"
                :key="item.id"
                :label="item.name"
              >
                <el-checkbox
                  border
                  v-for="(i, ind) in item.attrbute_value_to"
                  :key="i.id"
                  :label="i.value"
                  :checked="i.checked"
                  @change="checkbox_change(index, ind)"
                ></el-checkbox>
              </el-form-item>
            </div>

            <div v-else>暂无属性</div>
          </el-tab-pane>
          <el-tab-pane label="详细参数" name="3">
            <table v-if="add_form.specs_status === 1">
              <thead>
                <tr>
                  <th v-for="(item, index) in item_list" :key="index">
                    {{ item.name }}
                  </th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(item, index) in sku_list" :key="index">
                  <td v-for="(i, ind) in item" :key="ind">
                    <div v-if="i.id > 0">{{ i.name }}</div>
                    <el-input
                      v-else
                      maxlength="10"
                      v-model="i.name"
                      clearable
                      show-word-limit
                    ></el-input>
                  </td>
                </tr>
              </tbody>
            </table>
            <div v-else>
              <el-form-item label="产品售价">
                <el-input
                  placeholder="请输入产品售价"
                  maxlength="10"
                  clearable
                  show-word-limit
                  v-model="add_form_d.money"
                ></el-input>
              </el-form-item>
              <el-form-item label="产品市场价">
                <el-input
                  placeholder="请输入产品市场价"
                  maxlength="10"
                  clearable
                  show-word-limit
                  v-model="add_form_d.bazaar_money"
                ></el-input>
              </el-form-item>
              <el-form-item label="产品成本价">
                <el-input
                  placeholder="请输入产品成本价"
                  maxlength="10"
                  clearable
                  show-word-limit
                  v-model="add_form_d.cost_money"
                ></el-input>
              </el-form-item>
              <el-form-item label="邮费">
                <el-input
                  placeholder="请输入邮费"
                  maxlength="10"
                  clearable
                  show-word-limit
                  v-model="add_form_d.postage"
                ></el-input>
              </el-form-item>
              <el-form-item label="销量">
                <el-input
                  placeholder="请输入销量"
                  maxlength="10"
                  clearable
                  show-word-limit
                  v-model="add_form_d.sales"
                ></el-input>
              </el-form-item>
              <el-form-item label="库存">
                <el-input
                  placeholder="请输入库存"
                  maxlength="10"
                  clearable
                  show-word-limit
                  v-model="add_form_d.stock"
                ></el-input>
              </el-form-item>
            </div>
          </el-tab-pane>
          <el-tab-pane label="商品内容" name="4">
            <el-form-item label="商品内容">
              <s-editor
                :content="add_form.content"
                @confirm_content="confirm_content"
              ></s-editor>
            </el-form-item>
            <!-- 按钮区 -->
            <el-button
              class="send_btn"
              :disabled="btnStatus.store"
              type="primary"
              @click="add()"
              >确 定</el-button
            >
          </el-tab-pane>
        </el-tabs>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import sFileImage from "@/components/s-file-image/s-file-image.vue";
import sEditor from "@/components/s-editor/s-editor.vue";
export default {
  components: {
    "s-file-image": sFileImage,
    "s-editor": sEditor
  },
  data() {
    var checkSort = (rule, value, callback) => {
      // 定义正则表达式
      const regSort = /^[1-9]{1}[0-9]{0,10}$/;
      if (regSort.test(value)) {
        return callback();
      }
      callback(new Error("请输入排序（大于0的数字）!"));
    };
    return {
      btnStatus: this.is_string(
        {
          store: "shop/product/store"
        },
        this
      ),
      active_index: "0",
      product_type_list: [], // 商品分类数据
      value: [], // 商品分类数据选择的数据
      attrbute_key_list: [], // 属性数据
      item_list: [], // 选择的数据属性
      sku_list: [],
      add_form: {
        name: "",
        product_type_id: "",
        describe: "",
        image_id: "",
        sort: 1,
        images: "",
        specs_status: 0,
        content: ""
      },
      add_form_d: {
        money: "0",
        bazaar_money: "0",
        cost_money: "0",
        postage: "0",
        stock: "0",
        sales: "0"
      },
      add_rules: {
        product_type_id: [
          { required: true, message: "请选择商品分类！", trigger: "blur" }
        ],
        name: [
          { required: true, message: "请输入商品名称！", trigger: "blur" },
          {
            min: 2,
            max: 20,
            message: "商品名称长度在2到20个字符",
            trigger: "blur"
          }
        ],
        describe: [
          { required: true, message: "请输入商品描述！", trigger: "blur" },
          {
            min: 2,
            max: 100,
            message: "商品描述长度在2到100个字符",
            trigger: "blur"
          }
        ],
        image_id: [
          { required: true, message: "请选择图片！", trigger: "blur" }
        ],
        specs_status: [
          { required: true, message: "请选择是否多规格！", trigger: "blur" }
        ],
        sort: [
          { required: true, message: "请输入排序！", trigger: "blur" },
          { validator: checkSort, trigger: "blur" }
        ]
      }
    };
  },
  created() {
    this.get_product_type_list();
  },
  methods: {
    // 确定
    add() {
      this.$refs.add_ref.validate(valid => {
        if (valid) {
          if (this.add_form.specs_status === 0) {
            const addAata = this.add_form;
            addAata.sales = this.add_form_d.sales;
            addAata.money = this.add_form_d.money;
            addAata.bazaar_money = this.add_form_d.bazaar_money;
            addAata.postage = this.add_form_d.postage;
            addAata.product_spec = [];
            addAata.product_spec.push(this.add_form_d);
            this.$base.request(
              {
                that: this,
                method: "POST",
                url: "shop/product/store",
                data: addAata
              },
              res => {
                if (res.code === 8888) {
                  this.$base.message({ that: this, message: res.msg });
                  this.$router.push("/shop/product/index");
                }
              }
            );
          } else {
            const addAata1 = this.add_form;
            const length = this.sku_list[0].length;
            addAata1.money = this.sku_list[0][length - 6].name;
            addAata1.bazaar_money = this.sku_list[0][length - 5].name;
            addAata1.postage = this.sku_list[0][length - 3].name;
            addAata1.sales = 0;
            addAata1.product_spec = [];
            for (var i = 0; i < this.sku_list.length; i++) {
              addAata1.sales += parseInt(this.sku_list[i][length - 1].name);
              const specs = [];
              const sku = [];
              for (var x = 0; x < this.sku_list[i].length - 6; x++) {
                specs.push({
                  id: this.sku_list[i][x].id,
                  name: this.sku_list[i][x].name
                });
                sku.push(this.sku_list[i][x].id);
              }
              addAata1.product_spec.push({
                money: this.sku_list[i][length - 6].name,
                bazaar_money: this.sku_list[i][length - 5].name,
                cost_money: this.sku_list[i][length - 4].name,
                postage: this.sku_list[i][length - 3].name,
                stock: this.sku_list[i][length - 2].name,
                sales: this.sku_list[i][length - 1].name,
                specs: specs,
                sku: sku
              });
            }
            const attrbuteList = [];
            for (var j = 0; j < this.item_list.length; j++) {
              if (this.item_list[j].sub) {
                attrbuteList.push(this.item_list[j]);
              }
            }
            addAata1.attrbute_list = attrbuteList;
            this.$base.request(
              {
                that: this,
                method: "POST",
                url: "shop/product/store",
                data: addAata1
              },
              res => {
                if (res.code === 8888) {
                  this.$base.message({ that: this, message: res.msg });
                  this.$router.push("/shop/product/index");
                }
              }
            );
          }
        }
      });
    },
    // 编辑器回调
    confirm_content(res) {
      this.add_form.content = res;
    },
    // 切换选项卡触发
    beforeLeave(activeName, oldActiveName) {
      this.$refs.add_ref.validate(() => {});
      if (oldActiveName === "0" && this.value.length === 0) {
        return false;
      }
    },
    // 商品分类
    get_product_type_list(callBack) {
      this.$base.request(
        {
          that: this,
          url: "shop/product/product_type_list"
        },
        res => {
          if (res.code === 8888) {
            this.product_type_list = res.data;
            callBack && callBack();
          }
        }
      );
    },
    // 添加图片回调
    add_confirm_image(res) {
      this.add_form.image_id = res[0].id;
    },
    // 添加多图回调
    add_confirm_image_all(res) {
      if (res.length > 0) {
        const imageArr = [];
        for (var i = 0; i < res.length; i++) {
          imageArr.push(res[i].id);
        }
        this.add_form.images = imageArr.join("|");
      } else {
        this.add_form.images = "";
      }
    },
    // 添加获取选择器值
    add_handle_change() {
      if (this.value.length > 0) {
        this.add_form.product_type_id = this.value[this.value.length - 1];
        this.get_product_attrbute_key_list();
      } else {
        this.add_form.product_type_id = "";
        this.attrbute_key_list = [];
      }
    },
    // 获取属性
    get_product_attrbute_key_list(callBack) {
      this.$base.request(
        {
          that: this,
          url: "shop/product/product_attrbute_key_list",
          data: { product_type_id: this.add_form.product_type_id }
        },
        res => {
          if (res.code === 8888) {
            this.attrbute_key_list = res.data;
            callBack && callBack();
          }
        }
      );
    },
    checkbox_change(index, ind) {
      this.attrbute_key_list[index].attrbute_value_to[ind].checked = !this
        .attrbute_key_list[index].attrbute_value_to[ind].checked;
      const itemArr = [];
      for (var i = 0; i < this.attrbute_key_list.length; i++) {
        for (
          var j = 0;
          j < this.attrbute_key_list[i].attrbute_value_to.length;
          j++
        ) {
          if (this.attrbute_key_list[i].attrbute_value_to[j].checked) {
            if (itemArr[i]) {
              itemArr[i].sub.push({
                id: this.attrbute_key_list[i].attrbute_value_to[j].id,
                name: this.attrbute_key_list[i].attrbute_value_to[j].value
              });
            } else {
              itemArr[i] = {
                id: this.attrbute_key_list[i].id,
                name: this.attrbute_key_list[i].name,
                sub: [
                  {
                    id: this.attrbute_key_list[i].attrbute_value_to[j].id,
                    name: this.attrbute_key_list[i].attrbute_value_to[j].value
                  }
                ]
              };
            }
          }
        }
      }
      this.item_list = itemArr;
      this.setDataInfo(() => {
        if (itemArr.length !== 0) {
          itemArr.push({
            id: "money",
            name: "产品售价"
          });
          itemArr.push({
            id: "bazaar_money",
            name: "产品市场价"
          });
          itemArr.push({
            id: "cost_money",
            name: "产品成本价"
          });
          itemArr.push({
            id: "postage",
            name: "邮费"
          });
          itemArr.push({
            id: "stock",
            name: "库存"
          });
          itemArr.push({
            id: "sales",
            name: "销量"
          });
          this.item_list = itemArr;
        }
      });
    },
    setDataInfo(callBack) {
      this.sku_list = [];
      if (this.item_list.length === 0) {
        return false;
      }

      if (this.item_list.length < 2) {
        const dataInfo = [];
        for (var y = 0; y < this.item_list[0].sub.length; y++) {
          const arr = [];
          arr.push({
            id: this.item_list[0].sub[y].id,
            name: this.item_list[0].sub[y].name
          });
          arr.push({
            id: "money",
            name: "0"
          });
          arr.push({
            id: "bazaar_money",
            name: "0"
          });
          arr.push({
            id: "cost_money",
            name: "0"
          });
          arr.push({
            id: "postage",
            name: "0"
          });
          arr.push({
            id: "stock",
            name: "0"
          });
          arr.push({
            id: "sales",
            name: "0"
          });
          dataInfo.push(arr);
        }
        this.sku_list = dataInfo;
      } else {
        const arr1 = [];
        for (var x = 0; x < this.item_list.length; x++) {
          arr1.push(this.item_list[x].sub);
        }
        const dataInfoOne = [].reduce.call(arr1, function(col, set) {
          const res = [];
          col.forEach(function(c) {
            set.forEach(function(s) {
              var t = [].concat(Array.isArray(c) ? c : [c]);
              t.push(s);
              res.push(t);
            });
          });
          return res;
        });
        for (var w = 0; w < dataInfoOne.length; w++) {
          dataInfoOne[w].push({
            id: "money",
            name: "0"
          });
          dataInfoOne[w].push({
            id: "bazaar_money",
            name: "0"
          });
          dataInfoOne[w].push({
            id: "cost_money",
            name: "0"
          });
          dataInfoOne[w].push({
            id: "postage",
            name: "0"
          });
          dataInfoOne[w].push({
            id: "stock",
            name: "0"
          });
          dataInfoOne[w].push({
            id: "sales",
            name: "0"
          });
        }
        this.sku_list = dataInfoOne;
      }
      callBack && callBack();
    }
  }
};
</script>
<style lang="scss" scoped>
@import "add.scss";
</style>
